import { Component } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup,FormControl, Validators } from '@angular/forms';
import { Observable } from 'rxjs';


function userNameValidator(control: FormControl): {[s:string]: boolean } {
  if(!control.value.match(/^zime/)) { return{invalidUser:true};}
    return{};
}


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title(title: any) {
    throw new Error('Method not implemented.');
  }
  //对应登录的表单
  myForm:FormGroup;
  //输入用户名的输入控件
  userName:FormControl;
  //输入密码的输入控件
  password:FormControl;

  name$: Observable<string>;
  constructor(private fb:FormBuilder){
    this.myForm=this.fb.group({
      'userName' :['',Validators.compose([Validators.required,Validators.minLength(7),userNameValidator])],
      'password':['',Validators.compose([Validators.required, Validators.minLength(6)])],
    }
    );
    this.userName=<FormControl>this.myForm.controls['userName'];
    this.password=<FormControl>this.myForm.controls['password'];
    this.name$=this.userName.valueChanges;
    this.userName.valueChanges.subscribe(val =>{
      console.log(val);
    })
  }
  onSubmit(value:any){
    console.log(value);
}
}
